<template>

	<view class="List">

		<template v-if="dataList[0]">
			<view class="item" v-for="(item,index) in dataList" :key='index'>
				<view class="item-title">
					<text>收款人：{{item.payee}}</text>
					<image class="it-icon" src="../../static/ic_1.png" mode="" @click="del(item.pk_id)"
						v-if="item.status == '0'"></image>
				</view>
				<view class="item-bank">收款银行：{{item.bank}}</view>
				<view class="bankNum">银行账号：{{item.bank_account}}</view>
				<view class="bankNum" style="padding-top: 0;">金额：￥{{item.amount}}</view>
				<view class="bankNum">申请状态：{{item.status | stateFilter}}</view>
				<view class="">申请时间：{{item.date_creation | format}}</view>
			</view>
		</template>


		<template v-else>
			<view class="empty">
				<u-empty text="暂无数据" mode="list" />
			</view>
		</template>
	</view>

</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js';
	import {
		formatDate
	} from '@/utils/moment/index.js'
	import {
		uniModal
	} from '@/utils/uniPromise.js'
	export default {
		mixins: [pagingMixin],
		data() {
			return {

			}
		},
		onLoad() {
			this.initPage()
		},
		filters: {
			format(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss')
			},
			stateFilter(state) {
				switch (state) {
					case 0:
						return '申请中'
						break
					case 1:
						return '待审核'
						break
					case 2:
						return '已支付'
						break
					case 3:
						return '已退回'
						break
					default:
						return ''
				}
			},
		},
		methods: {
			$onReachBottom() {
				this._load_data();
			},
			initPage() {
				this._init_data('', {
					fk_supplier_id: this.vuex_adminuser.supplier_id,
					type: 1
				}, {
					name: 'b_product_supplier_withdraw',
					apiopts: {
						setting: true
					}
				})
			},
			del(id) {
				uniModal({
					content: '是否删除该条数据'
				}).then(res => {
					if (res == 'success') {
						this.$DeleteManagerData(4, id)
						this.initPage()
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.List {
		padding: 20rpx 26rpx 0;
	}

	.item {
		background-color: #fff;
		width: 100%;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		margin-bottom: 20rpx;

		.item-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10rpx;

			.it-icon {
				width: 30rpx;
				height: 34rpx;
			}
		}

		.bankNum {
			padding: 10rpx 0;
		}
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;

		.btn {
			width: 698rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			color: #fff;
			background-color: #2d8cf0;
		}
	}

	.empty {
		height: 60vh;
	}
</style>
